<template>
	<view>
		<view class="registbox" >
			<uni-forms :modelValue="formData" label-position="top" :rules="rules" validate-trigger="bind">
				<uni-forms-item label="姓名" name="name">
					<uni-easyinput type="text" v-model="formData.userName" placeholder="请输入姓名" prefixIcon="person" />
				</uni-forms-item>
				<uni-forms-item label="密码" name="password">
					<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" prefixIcon="locked-filled"/>
				</uni-forms-item>
				<uni-forms-item label="确认密码" name="password">
					<uni-easyinput type="password" v-model="passwordCache" placeholder="请再次输入密码" prefixIcon="locked" />
				</uni-forms-item>
				
				<uni-forms-item label="性别" required>
					<uni-data-checkbox v-model="formData.sex" :localdata="sexs" />
				</uni-forms-item>
				<uni-forms-item label="年龄" name="age">
					<uni-easyinput type="text" v-model="formData.age" placeholder="请输入年龄" />
				</uni-forms-item>
				<uni-forms-item label="邮箱" name="email">
					<uni-easyinput type="text" v-model="formData.email" placeholder="请输入邮箱" prefixIcon="email-filled"/>
				</uni-forms-item>
				<uni-forms-item label="手机号" name="phone">
					<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入手机号" prefixIcon="phone"/>
				</uni-forms-item>
				<uni-forms-item label="验证码" name="captcha">
					<view>
						<uni-easyinput type="text" v-model="formData.captcha"  placeholder="请输入下图验证码"/>
						<image style="width: 30% auto;height: 100rpx;margin: 10rpx auto;" :src="formData.verify" mode="aspectFit"></image>
					</view>
				</uni-forms-item>
			</uni-forms>
			<view class="buttonBox">
				<button class="btn-shine"@click="doRegister()">
				    <span>注册</span>
				</button>
			</view>
			
		</view>
	</view>
</template>

<script>
import { login } from '../../js/network/loginRequest';
	const api=require('@/js/network/request.js');
	export default {
		data() {
			return {
				passwordCache:'',
				// 表单数据
				formData: {
					userName: '',
					email: '',
					age: '',
					password:'',
					sex:'',
					phone: '',
					captcha: '',
					verify: "",
					uuid:''
				},
				sexs: [
					{text: '男',value: 0},
					{text: '女',value: 1}
				],
				// 校验规则
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名',
							},
							{
							minLength: 2,
							maxLength: 10,
							errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}]
					},
					// 对email字段进行必填验证
					email: {
						rules: [{
							format: 'email',
							errorMessage: '请输入正确的邮箱地址',
								}]
					},
					phone: {
						rules:[{
							pattern:'^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$',
							errorMessage: '请输入正确的手机号',
						}]
					},
					age: {
						rules:[{
							pattern:'^(?:[1-9][0-9]?|1[0-2][0-9]|130)$',
							errorMessage: '请输入正确的年龄',
						}]
					}
				},
			}
		},
		onLoad() {
		            api.request({
		            	url: '/user/captcha',
		            	method: 'GET'
		            }).then((res)=>{
		            	this.formData.uuid=res.data.UUID,
		            	this.formData.verify=res.data.base64Data
		            })
		        },
		methods: {
			 checkDate(){
				let that = this.formData;
				var msg ='';
				Object.keys(that).forEach(function (value, key) {
				// console.log("id:" + value, "number:" + that[value]);
				if(!that[value]){
					if(msg!=''){
						msg=msg+'和'+value+'不能为空';
					}else{
						msg=value+'不能为空';
					}
					
				}
				})
				if(msg!=''){
					if(msg.length>12){
						uni.showToast({
						title: '请不要填空数据',
						duration: 2000    ,//持续时间为 2秒
						icon:'error'
							})  
					}else{
						uni.showToast({
						title: msg,
						icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
						duration: 2000    //持续时间为 2秒
							}) 
					}
				}
				return msg;
			},
			// 触发提交表单
			doRegister() {
				// 检验非空
				if(this.checkDate()==''){
					return;
				}
				//密码不一致情况处理
				if(this.passwordCache!=this.formData.password){
					let that = this;
					uni.showModal({
						title: '密码不一致',
						content: '请检查两次密码输入',
						success: function (res) {
							if (res.confirm) {
								that.passwordCache='';
							} else if (res.cancel) {
								that.passwordCache='';
								that.formData.password='';
							}
						}
					});
				}
				else{
					//请求后端接口
					api.request({
						url: '/user/register',
						method: 'POST',
						data: this.formData
					}).then((res)=>{
						uni.redirectTo({
							url:"./login"
						})
						//todo 绑定后端返回的数据
						//跳转页面
					})
				}	
			},
			getCaptcha(){
				api.request({
					url: '/user/register',
					method: 'GET'
				}).then((res)=>{
					this.formData.UUID=res.data.data.UUID,
					this.formData.verify=res.data.data.base64Data
				})
			}
			
		}
	}
</script>

<style lang="scss">
	@import url("../../css/madBox.css");
	@import url("../../css/buttonView.css");
</style>
